<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 顶部 -->
        <el-form :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="关键字">
                <el-input v-model="form.keyword" placeholder="根据编号搜索" class="myipt"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" style="text-align:right">
              <el-button size="small" @click="cleaript">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
        <!-- 提示 -->
        <el-alert :title="`数据一共${counts}条`" type="info" show-icon> </el-alert>
        <!-- 表格区域 -->
        <el-table :data="List" class="mytable">
          <el-table-column prop="id" label="编号" width="200"> </el-table-column>
          <el-table-column label="题型" width="80">
            <template v-slot="{ row }">{{ row.questionType | questionTypefilters }}</template>
          </el-table-column>
          <el-table-column label="题目编号" width="200">
            <template v-slot="{ row }">
              <!-- {{ row.questionIDs }} -->
              <div class="color" v-for="item in row.questionIDs" :key="item.index" @click="open(item.id)">
                {{ item.number }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录用时间" width="200"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)"> </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)"> </el-table-column>
          <el-table-column prop="userName" label="录入人"> </el-table-column>
          <el-table-column label="操作" width="80">
            <template v-slot="{ row }">
              <el-button size="small" type="text" @click="del(row)">
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- 
            size-change：页容量发生改变后会触发的事件
            current-change：当前页发生改变后会触发的事件
            current-page：当前页
            page-sizes：页容量的集合
            page-size：选中的页容量
            layout：分页组件的布局
            total：数据的总条数
           -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </el-card>
      <!-- 题目预览 -->
      <questionsPreview ref="myPre" :PreviewShow.sync="PreviewShow"></questionsPreview>
    </div>
  </div>
</template>

<script>
//导入组题列表相关的api
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
//导入子组件
import questionsPreview from '../components/questions-preview.vue'
export default {
  data() {
    return {
      //表单数据
      form: {
        keyword: ''
      },
      //题库列表数据
      List: [],
      //数据总条数
      counts: 0,
      //当前页
      page: 1,
      //页容量
      pagesize: 20,
      //控制题目预览的显示与隐藏
      PreviewShow: false
    }
  },
  methods: {
    //打开预览面板
    open(id) {
      this.PreviewShow = true
      //打开预览面板获取基础题库详情
      this.$refs.myPre.list(id)
    },
    //根据关键字搜索
    search() {
      //跳转到第一页
      this.page = 1
      //更新数据
      this.initQueList()
    },
    //删除列表信息
    async del(row) {
      //询问用户是否删除
      const result = await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).catch(err => err)
      // console.log(result)
      //点击取消
      if (result === 'cancel') return
      //点击确认
      //发请求
      await removeRandoms(row)
      //需要先判断数据列表的长度等于 1 且 当前页大于 1 让当前页自减 1
      if (this.List.length === 1 && this.page > 1) {
        this.page--
      }
      //提示用户
      this.$message.success('删除成功')
      //更新列表数据
      this.initQueList()
    },
    //清空输入框内容
    cleaript() {
      this.form = {
        keyword: ''
      }
      //更新数据
      this.initQueList()
    },
    //获取组题列表数据
    async initQueList() {
      const { data: res } = await randoms({ page: this.page, pagesize: this.pagesize, ...this.form })
      // console.log(res)
      //保存列表数据
      this.List = res.items
      //保存数据总条数
      this.counts = res.counts
    },
    //页容量发生改变触发
    handleSizeChange(pagesize) {
      // console.log(pagesize)
      //保存当前选中的页容量
      this.pagesize = pagesize
      //重新渲染页面
      this.initQueList()
    },
    //当前页面发生改变触发
    handleCurrentChange(page) {
      // console.log(page)
      //保存当前选中页
      this.page = page
      //重新渲染页面
      this.initQueList()
    }
  },
  created() {
    this.initQueList()
  },
  components: {
    questionsPreview
  }
}
</script>

<style scoped lang="scss">
.dashboard-container {
  .app-container {
    .myipt {
      width: 45%;
    }
    .mytable {
      margin-top: 15px;
      i {
        border: 1px solid #fbc4c4;
        padding: 10px;
        border-radius: 50%;
        color: #f56c6c;
        background: #fef0f0;
        &:hover {
          background: #f56c6c;
          color: #fff;
        }
        .link:hover {
          color: blue;
        }
      }
      .color {
        color: rgb(0, 153, 255);
        //鼠标进入，显示小手
        cursor: pointer;
      }
    }
    .el-pagination.is-background {
      text-align: right;
      margin-top: 15px;
    }
    ::v-deep .el-pagination__jump {
      margin-left: 0;
    }
  }
}
</style>
